<template>
  <div class="h-right fx-h-c">
    <Search></Search>
    <a-button type="primary">
      <router-link :to='{name: "write"}'>写文章
      </router-link>
    </a-button>
    <a-badge count="5">
      <a-icon type="bell" theme="filled" class="icon cs" />
    </a-badge>
    <Dropdown v-if="isLogin"></Dropdown>
    <div v-else>
      <a-button type="primary" @click="showModal">登录</a-button>
    </div>
    <a-modal
      v-model="visible"
      :footer="null"
      title="账密登录"
      width="31.8rem"
      @ok="handleOk"
    >
      <div class="img" style="position: absolute; top: -8.2rem; left: 10rem">
        <img
          style="width: 12rem; height: 10rem;"
          src="https://sf6-scmcdn2-tos.pstatp.com/xitu_juejin_web/img/normal.0447fe9.png"
          alt=""
        />
      </div>
      <Form v-show="login" type="登录"  @changeVisible="changeVisible"></Form>
      <Form
        v-show="!login"
        type="注册"
        @changeLogin="childChangeLogin"
        @changeVisible="changeVisible"
      ></Form>
      <div class="m-t-1 clearfix">
        <span class="fl cm-color cs" @click="changeLogin">{{ msg }}</span>
        <span class="cm-color fr cs">忘记密码</span>
      </div>
      <div class="l-icos m-t-2">
        <LoginIco></LoginIco>
      </div>
      <div class="notice m-t-2">
        <span
          >注册登录即表示同意 <a class="cm-color" href="">用户协议</a>、
          <a class="cm-color" href="">隐私政策</a></span
        >
      </div>
    </a-modal>
  </div>
</template>

<script>
import Search from "@/components/header/HeaderRight/Search";
import Dropdown from "@/components/header/HeaderRight/Dropdown";
import Form from "@/components/header/form/Form";
import LoginIco from "@/components/header/form/LoginIco";
import { mapState } from "vuex";
import { handleTest } from "@/utils/utils";
export default {
  name: "HeaderRight",
  components: {
    Search,
    Form,
    LoginIco,
    Dropdown,
  },
  data() {
    return {
      visible: false,
      login: true,
      msg: "注册",
    };
  },
  methods: {
    handleOk(e) {
      // 隐藏modal
      (e);
      this.visible = false;
    },
    showModal() {
      // 显示modal
      this.visible = true;
    },
    changeLogin() {
      this.login = !this.login;
      this.msg = this.login ? "注册" : "登录";
    },
    childChangeLogin() {
      this.login = true;
      this.msg = "注册";
    },
    // 改变弹窗显隐
    changeVisible(type) {
      this.visible = type;
    },
  },
  computed: {
    ...mapState(["isLogin"]),
  },
};
</script>

<style lang="scss" scoped>
.h-right {
  width: 40rem;
  justify-content: space-between;
  .icon {
    font-size: 2.5rem;
  }
}
</style>